<!-- 通知 -->
<template>
    <div id="app">
      <div class="head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Notice' }">消息</el-breadcrumb-item>
          <el-breadcrumb-item>通知</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
        <div>
          <el-card  shadow="hover">
            <div slot="header" class="cardTitle">
              发布消息
            </div>
              <el-form label-width="80px">
                <el-form-item label="消息标题">
                  <!-- <el-input v-model="" placeholder=""></el-input> -->
                  <el-input placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="内容描述">
                  <el-input type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="消息类型">
                  <div class="selectItem">
                    <el-select placeholder="消息类型">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="通知对象">
                  <div class="selectItem">
                    <el-select placeholder="通知对象">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="submitView">
                    <el-button type="primary" @click="onSubmit">立即发布</el-button>
                    <el-button>取消</el-button>
                  </div>
                </el-form-item>

              </el-form>
          </el-card>
          <el-card style="margin-top:20px;" shadow="naver">
            <div slot="header" class="cardTitle">
              <span>已推送消息</span>
            </div>
            <div>
              <div class="paginContentDiv">
                <el-card shadow="hover">
                  <div class="cardContent">
                    <div class="avatar">
                      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    </div>
                    <div class="newUserName">
                      <el-collapse>
                        <el-collapse-item title="一致性 Consistency">
                          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                        </el-collapse-item>
                      </el-collapse>
                    </div>
                  </div>
                </el-card>
              </div>
              <div class="paginDiv">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="100">
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
</template>
<script>
export default {
   data() {
      return {
      }
   },
   created(){
   },
   computed:{
   },
   methods:{
   },
}
</script>
<style scoped>
.paginContentDiv .el-card .cardContent{
  display: flex;
  align-items: center;
  width: 100%;
}
.newUserName{
  width: 100%;
  margin-left: 20px;
}
.el-card{
  border-radius: 10px;
}
.cardTitle{
  display: flex;
  font-weight: 600;
}
.selectItem,.submitView{
  display: flex;
}
.submitView{
  justify-content: flex-end;
}
.paginDiv{
margin-top: 20px;
}
</style>
